import React, { Component } from "react";
import PropTypes from "prop-types";
import { DDV } from "../../public/debug";
import { Login as LoginPro } from "ant-design-pro";
import { Alert, Checkbox, Icon } from "antd";
import { ALogin } from "../../api";
import "../../assets/less/login.less";

const {
          UserName,
          Password,
          // Mobile,
          // Captcha,
          Submit
      } = LoginPro;

class Login extends Component {
    /*constructor(props) {
      super(props);
    }*/
    state = {
        notice:        "",
        autoLogin:     true,
        submitLoading: false,
        captchaCount:  0
    };

    componentDidMount() {
        // DDV('cdm.', this.props);
    }

    onSubmit = (err, values) => {
        this.setState({
            notice:        "",
            captchaCount:  this.captchaCount + 1
        }, () => {
            if (!err) {
                this.setState({
                    submitLoading:true,
                }, () => {
                    ALogin(values)
                        .then((obj) => {
                            DDV(obj.data);
                            if (obj.data.status === 200) {
                                localStorage.setItem("access_token", obj.data.data.access_token);
                                localStorage.setItem("uid", obj.data.data.uid);
                                this.props.handleUserInfo().then(() => {
                                    this.setState({
                                        submitLoading: false,
                                    }, () => {
                                        this.props.handleCancel();
                                    });
                                });
                            } else {
                                this.setState({
                                    submitLoading: false,
                                });
                            }
                        })
                        .catch(err => {
                            DDV(err);
                            this.setState({
                                notice: "网络不佳，请联系网络管理员。",
                                submitLoading: false,
                            });
                        });
                });
            }

        });
    };
    onTabChange = (key) => {
        this.setState({
            type: key
        });
    };
    changeAutoLogin = (e) => {
        this.setState({
            autoLogin: e.target.checked
        });
    };

    render() {
        return (
            <div className='box'>
                <LoginPro
                    defaultActiveKey={this.state.type}
                    onTabChange={this.onTabChange}
                    onSubmit={this.onSubmit}
                    ref={form => {
                        this.loginForm = form;
                    }}
                >
                    <div key="tab1">
                        {
                            this.state.notice &&
                            <Alert style={{ marginBottom: 24 }} message={this.state.notice} type="error" showIcon
                                   closable />
                        }
                        <UserName name="mobilePhone" placeholder="手机号" />
                        <Password
                            name="password"
                            placeholder="密码"
                            onPressEnter={() => this.loginForm.validateFields(this.onSubmit)}
                        />
                    </div>
                    <div>
                        <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>保持登录</Checkbox>
                        {/*<a style={{ float: "right" }} href="">忘记密码</a>*/}
                    </div>
                    <div className='submitButton'>
                        <Submit loading={this.state.submitLoading} block>登录</Submit>
                    </div>
                    <div className='other'>
                        其他登录方式
                        <Icon type="wechat" className='icon' theme="outlined" />
                        <Icon type="qq" className='icon' theme="outlined" />
                        <span style={{ float: "right" }} onClick={this.props.handleModalType}>注册账号</span>
                    </div>
                </LoginPro>

            </div>
        );
    }
}

Login.propTypes = {
    handleModalType: PropTypes.func,
};

export default Login;
